import { useState } from 'react';
import { View,Text } from '@tarojs/components';
import { AtIcon, AtTabs, AtTabsPane } from 'taro-ui';
import './style.scss';

/**
 * 更多服务
 * @returns
 */
const MoreService = () => {
  const [current, serCurrent] = useState(0);
  const tabList = [
    { title: '猜你想问', value: 0 },
    { title: '帮助中心', value: 1 },
  ]
  const list = [
    {
      title:'商品送错了/送漏了怎么办？'
    },
    {
      title:'商品变质如何处理？'
    },
    {
      title:'如何催单？'
    },
    {
      title:'退款退到哪里？多久到账？'
    },
    {
      title:'如何领取优惠券？'
    },
    {
      title:'如何修改收货时间？'
    },
    {
      title:'优惠券如何退还？'
    },
    {
      title:'老友专属爱心服务热线？'
    }
  ]
  const onTabChange = (index: number) => {
    serCurrent(index);
  }
  return <View className='more-service-wrap'>
    <AtTabs className='service-tab' scroll current={current} tabList={tabList} onClick={onTabChange}>
      {tabList.map((tab, index) => {
        return (
          <AtTabsPane key={tab.value} current={current} index={index}>
            <View className="service-list">
              {list.map((item: any) => (
                <View className='service-item'>
                  <Text className='service-title'>{item.title}</Text>
                  <AtIcon value="chevron-down" size={14} />
                </View>
              ))}
            </View>
          </AtTabsPane>
        );
      })}
    </AtTabs>
  </View>;
};
export default MoreService;
